<template>
    <div class="mainItem">
        <div class="boxmock" v-loading="loading" v-if="loading" :class="loading ? 'blurView' : ''"></div>
        <div class="mainItem-head">耗材数据分析</div>

        <div class="chartV">
            <div id="ml3V" ref="ml3V"></div>
        </div>

        <img class="mainItem-footer" src="@/assets/l.png" alt="">
    </div>
</template>

<script>
import { fetchGet } from '@/api/request'
export default {
    props: ['hIndex', 'dIndex'],
    data() {
        return {
            loading: false,
            ml3V: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.ml3V = this.$echarts.init(this.$refs.ml3V);
            this.chartInit();
        });
    },
    watch: {
        hIndex: function (infoData) {
            this.chartInit();
        },
        dIndex: function (infoData) {
            this.chartInit();
        },
    },
    methods: {
        chartInit() {
            this.loading = true;
            let _data = [], _xdata = [];
            _data = [[1, 99, 99, 1], [2, 42, 42, 2], [3, 72, 72, 3], [4, 63, 63, 4], [5, 16, 16, 5], [6, 45, 45, 6], [7, 93, 93, 7], [8, 152, 152, 8], [9, 214, 214, 9], [10, 321, 321, 10]]
            _xdata = ['胸外科', '耳鼻喉科', '肿瘤科', '神经内科', '神经外科', '肾内科', '皮肤科', '中医科', '妇科', '儿科']
            let option = {
                tooltip: {
                    trigger: 'item',
                },
                grid: {
                    top: '13%',
                    left: '3%',
                    right: '3%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: "#cccccccc",
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#eeeeee55",
                        },
                    },
                    axisLabel: {
                        color: '#fff',
                    },
                    data: _xdata
                },
                dataZoom: [
                    {
                        type: 'inside',
                    },
                    {
                        left: '2%',
                        width: '95%',
                        bottom: 15,
                        height: 15,
                        type: 'slider',
                    },
                ],
                yAxis: {
                    scale: true,
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#eeeeee55",

                        }
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        data: _data,
                        symbolSize: function (data) {
                            return Math.sqrt(data[2]) * 2;
                        },
                        type: 'scatter',
                        emphasis: {
                            focus: 'series',
                            label: {
                                show: true,
                                position: 'top'
                            }
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: '#33333388',
                            shadowOffsetY: 5,
                            color: new this.$echarts.graphic.RadialGradient(0.4, 0.5, 1, [
                                {
                                    offset: 0,
                                    color: '#9769d388'
                                },
                                {
                                    offset: 1,
                                    color: '#d5628a'
                                }
                            ])
                        }
                    },
                ]
            };

            this.ml3V.setOption(option)
            this.loading = false;
        }
    }
}
</script>

<style lang="scss" scoped>
.mainItem {
    width: 400px;
    height: 300px;
    position: relative;

    .chartV {
        height: 280px;
        width: 400px;
        position: absolute;
        top: 15px;
        left: 0;

        #ml3V {
            width: 100%;
            height: 100%;
        }
    }
}
</style>